<%--<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>--%>
<%--<%@ page import="java.sql.*" %>--%>
<%--<%String username=(String)session.getAttribute("username");%>--%>
<%--<!DOCTYPE html>--%>
<%--<html>--%>
<%--<head>--%>
<%--<style type="text/css">--%>
<%--@import url(css/Nevagation.css);--%>
<%--@import url(css/ProfileStyle.css);--%>


<%--.div1{--%>
<%--   border:none;--%>
<%--   border-radius:20px;--%>
<%--   background-color:white;--%>
<%--}--%>

<%--.div3{--%>
<%--position:absolute; --%>
<%--width:870px;--%>
<%--display:none;--%>
<%--}--%>

<%--.div3show{--%>
<%--position:absolute;--%>
<%--width:870px;--%>
<%--height:800px;--%>
<%--background-color:white; --%>
<%--display:block;--%>
<%--}--%>

<%--.bt1{--%>
<%--background:url(image/plus.png);--%>
<%--background-repeat:no repeat;--%>
<%--background-size:30px 30px;--%>
<%--padding:10px;--%>
<%--width:30px;--%>
<%--height:30px;--%>
<%--border:none;--%>
<%--}--%>

<%--.bt1:hover{--%>
<%--background:url(image/plus-hover.png);--%>
<%--background-repeat:no repeat;--%>
<%--background-size:30px 30px;--%>
<%--padding:10px;--%>
<%--width:30px;--%>
<%--height:30px;--%>
<%--border:none;--%>
<%--}--%>

<%--.bt2{--%>
<%--background:url(image/delete.png);--%>
<%--background-repeat:no repeat;--%>
<%--background-size:30px 30px;--%>
<%--padding:10px;--%>
<%--width:30px;--%>
<%--height:30px;--%>
<%--border:none;--%>
<%--}--%>

<%--.bt2:hover{--%>
<%--background:url(image/delete-hover.ico);--%>
<%--background-repeat:no repeat;--%>
<%--background-size:30px 30px;--%>
<%--padding:10px;--%>
<%--width:30px;--%>
<%--height:30px;--%>
<%--border:none;--%>
<%--}--%>

<%--label{--%>
<%--margin-right:100px;--%>
<%--font-family:QS-M;--%>
<%--font-size:30px;--%>
<%--}--%>

<%--.file {--%>
<%--float: left;--%>
<%--position: relative;--%>
<%--width: 270px;--%>
<%--height: 40px;--%>
<%--padding:5px;--%>
<%--}--%>

<%--.bt{--%>
<%--cursor:pointer;--%>
<%--background:url(image/folderb.png); --%>
<%--background-repeat: no repeat; --%>
<%--background-size:35px 35px;--%>
<%--margin-left:5px; --%>
<%--height:33px; --%>
<%--width:33px; --%>
<%--border:none;--%>
<%--}--%>

<%--.btchosen{--%>
<%--background:url(image/folder.png); --%>
<%--background-repeat: no repeat; --%>
<%--background-size:35px 35px;--%>
<%--margin-left:5px; --%>
<%--height:35px; --%>
<%--width:35px; --%>
<%--border:none;--%>
<%--}--%>

<%--.file input {--%>
<%--position: absolute;--%>
<%--left: 3px;--%>
<%--top: 3px;--%>
<%--display: none;--%>
<%--}--%>

<%--.fileName {--%>
<%--position: absolute;--%>
<%--margin-left:10px;--%>
<%--bottom: 12px;--%>
<%--width: 160px;--%>
<%--font: 20px QS-M;--%>
<%--text-align: left;--%>
<%--white-space: nowrap;--%>
<%--overflow: hidden;--%>
<%--text-overflow: ellipsis;--%>
<%--}--%>

<%--.fileShow {--%>
<%--border: none;--%>
<%--background-color: lightblue;--%>
<%--}--%>

<%--.fileShow input {--%>
<%--display: block;--%>
<%--}--%>

<%--.fileClick{--%>
<%--border:none;--%>
<%--background-color: lightgray;--%>
<%--}--%>

<%--#chooseFile{--%>
<%--display:none;--%>
<%--}--%>

<%--.a{--%>
<%--font-family : QS-R;--%>
<%--font-size : 12px; --%>
<%--margin-left : 15px;--%>
<%--}--%>
<%--</style>--%>
<%--<script type="text/javascript">--%>
<%--        window.onload = function(){--%>
<%--        	var username = "";--%>
<%--        	username = "<%=username%>";--%>
<%--        	alert(username);--%>
<%--            var creat = document.querySelector('.creat');--%>
<%--            var del = document.querySelector('.del');--%>
<%--            var wrap = document.querySelector('.wrap');--%>
<%--            var content = document.querySelector('.content');--%>
<%--            var count= document.querySelectorAll('.file').length-1;--%>
<%--            var div_ls = document.getElementsByTagName('button');--%>
<%--            var div_ls1 = document.getElementsByTagName('div');--%>
<%--            --%>
<%--            creat.onclick = function(){--%>
<%--            	alert(count);--%>
<%--                count++;--%>
<%--                var i=[]--%>
<%--                var file = document.createElement('div');--%>
<%--                var con = document.createElement('div');--%>
<%--                var fileName = getFileName();--%>
<%--                file.className = "file";--%>
<%--                con.className = "div3";--%>
<%--                file.innerHTML = '<button class="bt" name="button"></button><input type="checkbox" name="" style="margin-top:-8.5px;margin-left:230px"><span id="text" class="fileName" contenteditable>'+fileName+'</span>';--%>

<%--                var check = file.querySelector('input[type = "checkbox"]');--%>
<%--                var fileName = file.querySelector('.fileName');--%>
<%--                var btn=file.querySelector('button');--%>
<%--                btn.id="b"+count;--%>
<%--                btn.name="button";--%>
<%--                file.id="f"+count;--%>
<%--                con.id="d"+count;--%>
<%--                con.name="div";--%>
<%--                --%>

<%--                file.onmouseover = function(){--%>
<%--                	this.className = "file fileShow";--%>
<%--                };--%>

<%--                file.onmouseout= function(){--%>
<%--                    if(!check.checked){--%>
<%--                        this.className = "file";--%>
<%--                    }--%>
<%--                };--%>

<%--                btn.onclick=function(){--%>
<%--                	--%>
<%--                    for(var i=0;i<div_ls.length;i++){--%>
<%--                        if(div_ls[i].getAttribute('name') == 'button'){--%>
<%--                            div_ls[i].setAttribute('class', 'bt');--%>
<%--                        }--%>
<%--                    }--%>
<%--                    --%>
<%--                    for(var i=0;i<div_ls1.length;i++){--%>
<%--                    	if(div_ls1[i].id.substr(0,1)=="d"){--%>
<%--                    		div_ls1[i].className='div3';--%>
<%--                    	}--%>
<%--                    }--%>

<%--                    var h = document.getElementById(btn.id);--%>
<%--                    h.className = 'btchosen'; --%>
<%--                    var j = document.getElementById("d"+btn.id.substr(1));--%>
<%--                    j.className = 'div3show';--%>
<%--                    --%>
<%--                }--%>

<%--                fileName.onblur = function(){--%>
<%--                    if(this.innerHTML.trim() == ""){--%>
<%--                        alert("Folder name can not be null!");--%>
<%--                        this.focus();--%>
<%--                        return;--%>
<%--                    }--%>
<%--                    var fileNames = document.querySelectorAll('.fileName');--%>
<%--                    for(var i = 0; i < fileNames.length; i++){--%>
<%--                        if(this != fileNames[i]&&this.innerHTML == fileNames[i].innerHTML){--%>
<%--                            alert("folder name has already exists, please rename it!");--%>
<%--                            this.focus();--%>
<%--                        }--%>
<%--                    }--%>
<%--                };--%>

<%--                wrap.appendChild(file);--%>
<%--                content.appendChild(con);--%>
<%--            };--%>

<%--            del.onclick = function(){--%>
<%--                var fileName = wrap.querySelectorAll('input:checked+.fileName');--%>
<%--                var input = wrap.getElementsByTagName("input");--%>
<%--                var d = content.getElementsByTagName("div");--%>
<%--                --%>
<%--                for(var i = 0; i < fileName.length; i++){--%>
<%--                	if(document.getElementById("b"+fileName[i].parentNode.id.substr(1)).className='btchosen'){--%>
<%--                		document.getElementById("b0").className = 'btchosen';--%>
<%--                		document.getElementById("d0").className = 'div3show';--%>
<%--                	}--%>
<%--                	content.removeChild(document.getElementById("d"+fileName[i].parentNode.id.substr(1)));--%>
<%--                    wrap.removeChild(fileName[i].parentNode);                    --%>
<%--                }--%>
<%--                console.log(fileName);--%>
<%--                console.log(d);--%>
<%--            };--%>

<%--            function getFileName(){--%>
<%--                var fileName = "untitled folder";--%>
<%--                var fileNameLast = "";--%>
<%--                var fileNames = wrap.querySelectorAll('.fileName');--%>
<%--                if(fileNames.length == 0){--%>
<%--                    return fileName;--%>
<%--                }--%>

<%--                var names = [];--%>
<%--                for(var i = 0; i < fileNames.length; i++){--%>
<%--                    names.push(fileNames[i].innerHTML);--%>
<%--                }--%>

<%--                names = names.filter(function(val){--%>
<%--                    var startName = val.substr(0,15);--%>
<%--                    if(startName != "untitled folder"){--%>
<%--                        return false;--%>
<%--                    }--%>

<%--                    var lastName = val.substr(15);--%>
<%--                    if(isNaN(lastName)){--%>
<%--                        return false;--%>
<%--                    }--%>
<%--                    return true;--%>
<%--                });--%>
<%--                names.sort(function(a,b){--%>
<%--                    return a.substr(15) - b.substr(15);--%>
<%--                });--%>
<%--                console.log(names);--%>
<%--                for(var i = 0; i < names.length; i++){--%>
<%--                    if(names[0] != fileName){--%>
<%--                        return fileName;--%>
<%--                    }--%>
<%--                    if(i>0 && names[i] != fileName+(i+1)){--%>
<%--                        return fileName+(i+1);--%>
<%--                    }--%>
<%--                }--%>

<%--                fileNameLast = names.length + 1;--%>
<%--                fileName += fileNameLast;--%>
<%--                return fileName;--%>
<%--            }--%>
<%--            --%>
<%--            var obj = document.getElementById("upload");--%>
<%--            obj.onclick = function(){--%>
<%--            	var t = document.getElementById("chooseFile");--%>
<%--            	var q = document.querySelector('.div3show');--%>
<%--            	if(t.files.length==0)--%>
<%--            		alert("No files uploaded!");--%>
<%--            	else{	--%>
<%--            		var string="";--%>
<%--            		for(var i=0;i<t.files.length;i++)--%>
<%--            			string+=t.files[i].name+"\n";--%>
<%--            		--%>
<%--            		alert(string);--%>
<%--            	}--%>
<%--            } --%>
<%--        };       --%>
<%--</script>--%>
<%--<meta charset="UTF-8">--%>
<%--<title>Drive</title>--%>
<%--</head>--%>
<%--<body>--%>
<%--<script type="text/javascript">--%>
<%--function matchFileSuffixType(fileName) {--%>
<%--    // 后缀获取--%>
<%--    var suffix = ''--%>
<%--    // 获取类型结果--%>
<%--    var result = ''--%>
<%--    try {--%>
<%--      var flieArr = fileName.split('.')--%>
<%--      suffix = flieArr[flieArr.length - 1]--%>
<%--    } catch (err) {--%>
<%--      suffix = ''--%>
<%--    }--%>
<%--    // fileName无后缀返回 false--%>
<%--    if (!suffix) {--%>
<%--      result = false--%>
<%--      return result--%>
<%--    }--%>
<%--    // 图片格式--%>
<%--    var imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif','tif','tiff']--%>
<%--    // 进行图片匹配--%>
<%--    result = imglist.some(function (item) {--%>
<%--      return item == suffix--%>
<%--    })--%>
<%--    if (result) {--%>
<%--      result = 'image'--%>
<%--      return result--%>
<%--    }--%>
<%--    // 匹配txt--%>
<%--    var txtlist = ['txt']--%>
<%--    result = txtlist.some(function (item) {--%>
<%--      return item == suffix--%>
<%--    })--%>
<%--    if (result) {--%>
<%--      result = 'txt'--%>
<%--      return result--%>
<%--    }--%>

<%--    // 匹配 office文件--%>
<%--    var doclist = ['doc','docx']--%>
<%--    result = doclist.some(function (item) {--%>
<%--      return item == suffix--%>
<%--    })--%>
<%--    if (result) {--%>
<%--      result = 'doc'--%>
<%--      return result--%>
<%--    }--%>

<%--    var pdflist = ['pdf']--%>
<%--    result = pdflist.some(function (item) {--%>
<%--      return item == suffix--%>
<%--    })--%>
<%--    if (result) {--%>
<%--      result = 'pdf'--%>
<%--      return result--%>
<%--    }--%>

<%--    var pptlist = ['ppt','pptx']--%>
<%--    result = pptlist.some(function (item) {--%>
<%--      return item == suffix--%>
<%--    })--%>
<%--    if (result) {--%>
<%--      result = 'ppt'--%>
<%--      return result--%>
<%--    }--%>

<%--    // 匹配压缩文件--%>
<%--    var ziplist = ['zip','rar','jar','tar','gzip']--%>
<%--    result = ziplist.some(function (item) {--%>
<%--      return item == suffix--%>
<%--    })--%>
<%--    if (result) {--%>
<%--      result = 'zip'--%>
<%--      return result--%>
<%--    }--%>
<%--    // 匹配 视频--%>
<%--    var videolist = ['mp4', 'm2v', 'mkv']--%>
<%--    result = videolist.some(function (item) {--%>
<%--      return item == suffix--%>
<%--    })--%>
<%--    if (result) {--%>
<%--      result = 'video'--%>
<%--      return result--%>
<%--    }--%>
<%--    // 匹配 音频--%>
<%--    var radiolist = ['mp3', 'wav', 'wmv']--%>
<%--    result = radiolist.some(function (item) {--%>
<%--      return item == suffix--%>
<%--    })--%>
<%--    if (result) {--%>
<%--      result = 'radio'--%>
<%--      return result--%>
<%--    }--%>
<%--    // 其他 文件类型--%>
<%--    result = 'other'--%>
<%--    return result--%>
<%--  }--%>

<%--function read(){--%>
<%--	var v = document.getElementById("chooseFile");--%>
<%--	var div = document.querySelector('.div3show');--%>
<%--	var t = document.getElementById("img");--%>
<%--	v.click();--%>
<%--	v.addEventListener("change", function() {--%>
<%--            for(let i = 0; i < v.files.length; i++) {--%>
<%--            	var index = v.files[i].name.lastIndexOf('.')+1;--%>
<%--            	var suffix = v.files[i].name.substr(index);--%>
<%--                div.innerHTML = div.innerHTML + '<img src="url(image/file.png)"/><div class="a">'+ v.files[i].name + '</div><br>';--%>
<%--            }--%>
<%--	})--%>
<%--}--%>

<%--function change(){--%>
<%--	var a = document.getElementsByTagName('button');--%>
<%--	var b = document.getElementsByTagName('div');--%>
<%--	--%>
<%--	 for(var i=0;i<a.length;i++){--%>
<%--         if(a[i].getAttribute('name') == 'button'){--%>
<%--             a[i].setAttribute('class', 'bt');--%>
<%--         }--%>
<%--     }--%>
<%--     --%>
<%--     for(var i=0;i<b.length;i++){--%>
<%--     	if(b[i].id.substr(0,1)=="d"){--%>
<%--     		b[i].className='div3';--%>
<%--     	}--%>
<%--     }--%>

<%--     var h = document.getElementById("b0");--%>
<%--     h.className = 'btchosen'; --%>
<%--     var j = document.getElementById("d0");--%>
<%--     j.className = 'div3show';--%>
<%--}--%>
<%--</script>--%>
<%--<ul>--%>
<%--      <li style="margin-right:200px;margin-left:50px;"><img src="image/logo1.png" style="width:100px;height:60px;padding-top:10px;"></li>--%>
<%--      <li><a href="Profile-E.jsp">Home</a></li>--%>
<%--      <li><a href=" ">Course board</a></li>--%>
<%--      <li><a href=" ">Grade Marking</a></li>--%>
<%--      <li><a href="Drive-E.jsp" style="color:#004aad">Drive</a></li>--%>
<%--      <li><img src="image/user.png" style="width:50px;height:60px;margin-left:200px;padding-top:10px;"></li>--%>
<%-- </ul>--%>
<%-- --%>
<%--<div style="height:650px;width:280px;position:fixed;margin-left:30px;" class="div1">--%>
<%--     <div style="margin-left:20px;margin-top:30px;float:left" ><img src="image/home.ico" style="width:50px;height:50px;"></div>--%>
<%--     <div style="float:left;font-family:Muli-B;margin-left:10px;margin-top:40px;font-size:30px">MyFile</div>--%>
<%--    <header>--%>
<%--     <div style="float:left;margin-left:10px;margin-top:50px;"><button type="button" class="bt1 creat"></button></div>--%>
<%--     <div style="float:left;margin-left:10px;margin-top:50px;margin-bottom:20px"><button type="button" class="bt2 del"></button></div>--%>
<%--    </header>--%>
<%--    <div class="file" id="f0"><button type="button" class="btchosen" id="b0" name="button" onclick="change();"></button><input type="checkbox" style="margin-top:-8.5px;margin-left:230px"><span id="text" class="fileName">MyFile</span></div>--%>
<%--    <div class="wrap" style="overflow-y:auto;width:280px;height:540px;"></div>--%>
<%--</div>--%>

<%--<h2 style="margin-left:400px;margin-top:40px;float:left;"><label>File name</label><label>File type</label><label>Time create</label>--%>
<%--    <button class="bt1" type="button" id="img" onclick="read();"></button>--%>
<%--    <input type="file" id="chooseFile" name="chooseFile[]" multiple>--%>
<%--    <button id="upload" type="button">Upload</button>--%>
<%--</h2>--%>
<%--<hr style="color:gray;width:870px;margin-top:10px;margin-left:380px;border:1.5px solid #d9d9d9;">--%>
<%--<div class="div3show" id="d0" style="margin-left:380px;postion:relative;"></div>--%>
<%--<div class="content" style="margin-left:380px;postion:relative;">--%>
<%--</div>--%>
<%--</body>--%>
<%--</html>--%>